CSS !important விதி
ஒரு குறிப்பிட்ட பண்பின் மதிப்பிற்கு மிக உயர்ந்த முன்னுரிமையைக் கொடுக்க !important விதி பயன்படுத்தப்படுகிறது.
!important விதி அந்த உறுப்பில் அந்த குறிப்பிட்ட பண்புக்கான அனைத்து முந்தைய பாணியிடல் விதிகளையும் மீறும்!
சிறப்பு அதிகாரம்:
!important விதி சாதாரண CSS குறிப்பிட்ட தன்மை படிநிலையை வெளியே இயங்குகிறது. இது ஒரு பண்பு அறிவிப்பில் பயன்படுத்தப்படும் போது, நிலையான அடுக்கு விதிகளைத் தவிர்க்கும் ஒரு விதிவிலக்கை உருவாக்குகிறது.
!important விதி தொடரியல்
!important முக்கிய சொல் ஒரு CSS அறிவிப்பின் முடிவில், அரைப்புள்ளிக்கு முன் சேர்க்கப்படுகிறது.
selector {
property: value !important;
}p {
color: blue !important;
}
.button {
background-color: red !important;
border: none !important;
}
#header {
font-size: 24px !important;
}தவறான தொடரியல் எடுத்துக்காட்டுகள்:
/* தவறானது */
p { !important color: blue; }
/* தவறானது */
p { color !important: blue; }
/* தவறானது */
p { color: !important blue; }CSS !important விதி எடுத்துக்காட்டு
பின்வரும் எடுத்துக்காட்டில், அனைத்து மூன்று பத்திகளும் மஞ்சள் பின்புல வண்ணத்தைப் பெறும், இன்லைன் பாணி, id தேர்வி மற்றும் வகுப்பு தேர்வி அதிக குறிப்பிட்ட தன்மையைக் கொண்டிருந்தாலும் கூட. !important விதி அந்த உறுப்பில் அந்த குறிப்பிட்ட பண்புக்கான அனைத்து பாணியிடல் விதிகளையும் மீறுகிறது!
எடுத்துக்காட்டு
<html>
<head>
<style>
p {
background-color: yellow !important;
}
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
</style>
</head>
<body>
<p style="background-color:orange;">This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>
</body>
</html>இது ஒரு பத்தி (inline style: orange) - ஆனால் !important மூலம் மஞ்சள்
இது ஒரு பத்தி (class: gray) - ஆனால் !important மூலம் மஞ்சள்
இது ஒரு பத்தி (id: blue) - ஆனால் !important மூலம் மஞ்சள்
!important ஐ மிதமாக பயன்படுத்துங்கள்
ஒரு !important விதியை மீற ஒரே வழி, மூலக் குறியீட்டில் அதே (அல்லது அதிக) குறிப்பிட்ட தன்மையுடன் ஒரு அறிவிப்பில் மற்றொரு !important விதியைச் சேர்ப்பதாகும் - இங்குதான் சிக்கல் தொடங்குகிறது!
CSS குறியீடு குழப்பமாக இருக்கும் மற்றும் பிழைத்திருத்தம் கடினமாக இருக்கும்! குறிப்பாக உங்களிடம் ஒரு பெரிய பாணி தாள் இருந்தால்!
எடுத்துக்காட்டு
p {
background-color: red !important;
}
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}குழப்பமான குறியீடு:
இந்த எடுத்துக்காட்டில், எந்த வண்ணம் மிக முக்கியமானதாகக் கருதப்படுகிறது என்பது மிகவும் தெளிவாக இல்லை. பல !important அறிவிப்புகள் கொண்ட குறியீடு "குறிப்பிட்ட தன்மை போர்கள்" உருவாக்கும், இதில் டெவலப்பர்கள் முந்தைய !important அறிவிப்புகளை மீற அதிகரித்த குறிப்பிட்ட தன்மையுடன் தேர்விகளைச் சேர்க்கிறார்கள்.
!important இன் சில நியாயமான பயன்கள்
!important விதி சில சந்தர்ப்பங்களில் பயனுள்ளதாக இருக்கும், எடுத்துக்காட்டாக:
பயனர் விருப்பங்கள் எடுத்துக்காட்டு
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}குறைக்கப்பட்ட இயக்க விருப்பத்தைச் செயல்படுத்திய பயனர்களுக்கு அனிமேஷன்கள் மற்றும் மாற்றங்களை அணைக்க அல்லது குறைக்க !important ஐப் பயன்படுத்தலாம். இது இயக்க உணர்வு கொண்ட பயனர்களுக்கு ஒரு முக்கியமான அணுகல் அம்சமாகும்.
பொத்தான் எடுத்துக்காட்டு
சாம்பல் பின்புல வண்ணம், வெள்ளை உரை மற்றும் சில padding மற்றும் border உடன் இணைப்பு பொத்தான்களை பாணியிடவும்:
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}இப்போது, அதிக குறிப்பிட்ட தன்மையுடன் மற்றொரு உறுப்புக்குள் ஒரு இணைப்பு பொத்தானை வைத்தால், பண்புகள் முரண்படலாம். இதற்கு ஒரு எடுத்துக்காட்டு இங்கே:
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
#myDiv a {
color: red;
background-color: yellow;
}எதுவாக இருந்தாலும், அனைத்து பொத்தான்களும் ஒரே தோற்றத்தைக் கொண்டிருப்பதை "கட்டாயப்படுத்த", பொத்தானின் பண்புகளுக்கு !important விதியைச் சேர்க்கலாம், இது போன்றது:
a.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}
#myDiv a {
color: red;
background-color: yellow;
}மூன்றாம் தரப்பு CSS மேலாண்மை:
!important விதி CMS, ஃப்ரேம்வர்க்குகள் அல்லது பிற மூன்றாம் தரப்பு நூலகங்களிலிருந்து CSS ஐ மீற வேண்டியிருக்கும் போது மிகவும் பயனுள்ளதாக இருக்கும், அங்கு நீங்கள் மூல CSS கோப்புகளை நேரடியாக மாற்ற முடியாது.
CSS !important விதி பயிற்சி
!important விதி பற்றிய உங்கள் அறிவை இந்த பயிற்சியுடன் சோதிக்கவும்.
பின்வருவனவற்றில் !important விதியைப் பயன்படுத்துவதற்கான சரியான தொடரியல் எது?
சிறந்த நடைமுறைகள் மற்றும் மாற்றுகள்
பராமரிப்பு உத்திகள்:
அதிகமான !important பயன்பாட்டைக் கொண்ட திட்டங்களில், கணினியான மறுசீரமைப்பு அனைத்து நிகழ்வுகளையும் தணிக்கையிடுவதை உள்ளடக்குகிறது, அவற்றைத் தேவையின்படி வகைப்படுத்துகிறது மற்றும் படிப்படியாக அவற்றை சரியான குறிப்பிட்ட தன்மைத் தீர்வுகளுடன் மாற்றுகிறது. இந்த செயல்முறை நீண்டகால பராமரிப்புக்கு உதவுகிறது.